<script lang="ts" setup>
import type { Title01ComponentMeta } from '@/definitions/type'
import type { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { Input, RadioButton, RadioGroup, Space, Textarea, Tooltip } from 'ant-design-vue'

defineOptions({
  name: 'Title01Attr',
  inheritAttrs: true,
})
const { activeRender } = useCompStyle<Title01ComponentMeta>()
function handleSubtitleChange(ev: ChangeEvent) {
  const nextValue = ev.target.value?.replace(/[^A-Z\s]/gi, '')
  activeRender.value!.config.subTitle = nextValue
  ev.target.value = nextValue
}
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        标题模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      标题内容
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div class="field-control">
        <div class="field-label">
          标题
        </div>
        <Input v-model:value="activeRender.config.title" placeholder="请输入标题" :minlength="activeRender.config.titleRules?.min" :max-length="activeRender.config.titleRules?.max" :required="activeRender.config.titleRules?.required" />
      </div>
      <div class="field-control">
        <div class="field-label">
          副标题
        </div>
        <div class="relative">
          <Tooltip placement="bottomLeft">
            <template #title>
              此模版副标题只可输入英文
            </template>
            <div class="absolute w-34px h-32px left-0 top-0 text-primary-app z-10 text-center leading-32px text-sm cursor-pointer">
              英
            </div>
          </Tooltip>
          <Input v-model:value="activeRender.config.subTitle" placeholder="请输入副标题" style="padding-left: 34px;" :minlength="activeRender.config.subTitleRules?.min" :max-length="activeRender.config.subTitleRules?.max" :required="activeRender.config.subTitleRules?.required" @change="handleSubtitleChange" />
        </div>
      </div>
      <div class="field-control">
        <div class="field-label">
          描述
        </div>
        <Textarea v-model:value="activeRender.config.description" placeholder="请输入描述内容" :rows="4" :minlength="activeRender.config.descriptionRules?.min" :max-length="activeRender.config.descriptionRules?.max" :required="activeRender.config.descriptionRules?.required" />
      </div>
    </Space>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control {
  color: var(--app-text-color-main);
  @apply flex flex-col gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}
</style>
